<template>
	<view>
		<view class="container p-bottom" v-if="order.order_id">
			<scroll-view scroll-y="true">
				<!-- 顶部状态栏 -->
				<view class="detail-header dis-flex flex-y-center">
					<view class="header-state f-32 col-f">
						<text>{{ order.state_text }}</text>
					</view>
					<view class="header-backdrop"><image src="@/static/images/order/refund-bg.png" mode="aspectFill"></image></view>
				</view>
				<!-- 快递配送：配送地址 -->
				<view class="flow-delivery">
					<view class="flow-delivery__detail dis-flex flex-y-center">
						<view class="detail-location dis-flex"><text class="iconfont icon-dingwei"></text></view>
						<view class="detail-content flex-box">
							<view class="detail-content__title dis-flex">
								<text class="f-30">{{ order.address.name }}</text>
								<text class="detail-content__title-phone f-28">{{ order.address.phone }}</text>
							</view>
							<view class="detail-content__describe">
								<text class="col-7">{{ order.address.region.province }} {{ order.address.region.city }} {{ order.address.region.region }} {{ order.address.detail }}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 物流信息 -->
				<view class="flow-all-money b-f padding-box m-top20" v-if="order.delivery_status.value == 20">
					<view class="flow-all-list dis-flex"><text class="">物流信息</text></view>
					<!-- @tap="toPage" :data-url="'/pageShop/order/express/express?order_id=' + order.order_id" -->
					<view class="dis-flex">
						<view class="flex-box">
							<view class="dis-flex flow-all-list-cont">
								<text class="col-7">物流公司：{{ order.express.express_name }}</text>
							</view>
							<view class="dis-flex flow-all-list-cont">
								<text class="col-7" :selectable="true">物流单号：{{ order.express_no }}</text>
							</view>
						</view>
						<view class="flow-arrow dis-flex"><text class="iconfont icon-xiangyoujiantou user-orderJtou"></text></view>
					</view>
				</view>
				<!-- 商品详情 -->
				<view class="checkout_list padding-box b-f m-top20">
					<view class="flow-shopList dis-flex b-f" v-for="item in order.goods" :key="item.goods_id">
						<view class="flow-list-left"><image mode="scaleToFill" :src="item.image.file_path"></image></view>
						<view class="flow-list-right flex-box">
							<!-- 商品名称 -->
							<text class="f-30 col-3 twolist-hidden">{{ item.goods_name }}</text>
							<!-- 商品sku信息 -->
							<text class="f-24 col-7">{{ item.goods_attr }}</text>
							<!-- 商品数量和单价 -->
							<view class="flow-list-cont dis-flex flex-x-between flex-y-center">
								<text class="small">×{{ item.total_num }}</text>
								<text class="flow-cont" :class="{ 'price-delete': item.is_user_grade }">积分：{{ item.goods_price }}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 产品 -->
				<view class="flow-all-money b-f padding-box m-top20">
					<view class="dis-flex flow-all-list-cont">
						<text class="flex-five col-7">订单号：</text>
						<text class="flex-five t-r">{{ order.order_no }}</text>
					</view>
					<view class="dis-flex flow-all-list-cont">
						<text class="flex-five col-7">兑换时间：</text>
						<text class="flex-five t-r">{{ order.create_time }}</text>
					</view>
					<view class="dis-flex flow-all-list-cont">
						<text class="flex-five col-7">总消耗积分：</text>
						<text class="flex-five col-m t-r">{{ order.pay_price }}</text>
					</view>
				</view>
			</scroll-view>
			<!-- 操作栏 -->
			<view v-if="order.order_status.value != 20" class="flow-fixed-footer b-f">
				<view class="dis-flex checkout-box" v-if="order.pay_status.value == 10">
					<!-- 取消订单 -->
					<view @tap.stop="cancelOrder" class="flex-box checkout-left-detail t-c">取消订单</view>
					<!-- 订单付款 -->
					<view class="flex-box checkout-right-detail"><text @tap.stop="onPayOrder" class="flow-btn" v-if="order.pay_status.value == 10">去付款</text></view>
				</view>
				<!-- 确认收货 -->
				<view class="flow-btn h3" v-if="order.delivery_status.value == 20 && order.receipt_status.value == 10"><view @tap.stop="receipt">确认收货</view></view>
			</view>
		</view>
		<!-- 支付方式弹窗 -->
	</view>
</template>

<script>
import Tools from '@/utils/Tools.js';
import popup from '@/components/popup/index.vue';
export default {
	components: {
		popup
	},

	data() {
		return {
			// 配送方式
			order_id: null,
			order: {
				address: {
					region: {}
				}
			},
			setting: {}
		};
	},
	onLoad(options) {
		this.order_id = options.order_id;
		// 获取订单详情
	},
	onShow() {
		this.getOrderDetail();
	},
	methods: {
		getOrderDetail() {
			this.$u.api.getPointsOrderInfo(this.order_id).then(res => {
				this.order = res.data.order;
				this.setting = res.data.setting;
			});
		},
		/**
		 * 确认收货
		 */
		receipt() {
			// let _this = this;
			uni.showModal({
				title: '提示',
				content: '确认收到商品？',
				success: o => {
					if (o.confirm) {
						this.$u.api.receiptOrder(this.order_id).then(res => {
							this.getOrderDetail();
						});
					}
				}
			});
		}
	}
};
</script>

<style>
.order-cont {
	/* padding: 12rpx 0; */
	justify-content: space-between;
}

.order-cont .order-num text,
.order-cont .time {
	color: #888;
}

.order-cont .order-num text,
.order-cont .order-time text {
	color: #777;
	font-size: 26rpx;
}

.checkout-right-detail,
.checkout-left-detail {
	font-size: 30rpx;
	color: #333;
	line-height: 92rpx;
}

.btn-default {
	border-radius: 4px;
	border: 1rpx solid #ccc;
	padding: 6rpx 20rpx;
	font-size: 28rpx;
	color: #555;
}

/* 会员价 */

.flow-shopList .flow-list-right .flow-cont.price-delete {
	font-size: 26rpx;
	color: #777;
	text-decoration: line-through;
}

.flow-shopList .grade-price {
	padding-top: 8rpx;
	font-size: 28rpx;
	color: #ff495e;
	text-align: right;
}

/* 顶部状态栏 */

.detail-header {
	position: relative;
	width: 100%;
	height: 140rpx;
}

.detail-header .header-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

.detail-header .header-backdrop image {
	display: block;
	width: 750rpx;
	height: 140rpx;
}

.header-state {
	padding: 0 50rpx;
	z-index: 2;
}

/* 配送信息 */

.flow-delivery {
	background: #fff
		url('')
		bottom left repeat-x;
	background-size: 120rpx auto;
}

.flow-delivery__title {
	width: 702rpx;
	padding: 15rpx 0;
	margin: 0 auto;
	background: #fff;
	border-bottom: 1rpx solid #f1f1f1;
}

.flow-delivery__title-text {
	margin-right: 20rpx;
}

.flow-delivery__detail {
	padding: 30rpx;
}

.detail-content {
	padding: 0 20rpx;
}

.detail-content__title {
	margin-bottom: 6rpx;
}

.detail-content .detail-content__title-phone {
	margin-left: 10rpx;
}

.detail-content .detail-content__describe {
	font-size: 28rpx;
}

/* 弹出层 */

.pop-example__container {
	background: #fff;
	padding: 30rpx 40rpx;
	border-radius: 10rpx;
	min-width: 460rpx;
}

.pop-example__container .pop-title {
	text-align: center;
}

.pop-content {
	margin-top: 30rpx;
}

/* 弹出层：支付方式 */

.pop-orderPay .pop-title {
	text-align: left;
}

.pay-method .pay-item {
	padding: 20rpx 0;
	font-size: 28rpx;
	/* border-bottom: 1rpx solid rgb(248, 248, 248); */
}

.pay-method .pay-item .item-left_icon {
	margin-right: 20rpx;
	font-size: 32rpx;
}

.pay-method .pay-item .item-left_icon.wechat {
	color: #00c800;
}

.pay-method .pay-item .item-left_icon.balance {
	color: #ff9700;
}
.pay-method .pay-item .item-left_icon.alipay {
	color: #0093e2;
}
</style>
